<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas学习-1</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        gap: 20px;
      }
      canvas {
        border: 1px solid lightblue;
      }
      .text-center {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h3 class="text-center">矩形绘制</h3>
    <canvas id="canvas-1" width="500" height="300"></canvas>
    <h3 class="text-center">线段绘制</h3>
    <canvas id="canvas-2" width="500" height="150"></canvas>
    <h3 class="text-center">三角形</h3>
    <canvas id="canvas-3" width="500" height="220"></canvas>
    <h3 class="text-center">圆和曲线</h3>
    <canvas id="canvas-4" width="500" height="300"></canvas>
    <canvas id="canvas-5" width="500" height="300"></canvas>

    <script>
      // 取到渲染元素
      const canvas = document.querySelector('#canvas-1');
      // 获取渲染上下文 接受一个参数：上下文类型 [webgl: 3d, 默认：2d，且获取上下文的方法也不一样]
      const ctx = canvas.getContext('2d');
      // canvas grid 画布栅格 unit每一个单元 一单元格=1px 以xy坐标系 起始为0,0

      // 默认只支持一种原生图形能够直接绘制出来 “矩形”，其他图形需要一些线段进行绘制
      // 1.填充满的矩形 2.边框矩形 3.透明矩形（外层有颜色，就能体现出来画出来的矩形为镂空的）

      // ========= *** ==========
      ctx.fillStyle = 'green';
      ctx.fillRect(400, 20, 50, 50); // 实心填充
      // ========= *** ==========

      // ctx可以理解成一个画笔
      ctx.fillStyle = 'orange'; // 填充颜色
      // 坐标系都是以 x = 0, y = 0 为起点 都是相对于canvas画板的 0,0 坐标
      ctx.fillRect(50, 50, 200, 200); // 绘制一个矩形
      ctx.clearRect(100, 100, 100, 100); // 清除指定的区域 并让他透明
      // 填充的形式设置样式使用 fillStyle

      // stroke 可以理解成笔尖笔画
      // 绘制一个矩形 该矩形根据当前的strokeStyle和其他上下文设置进行笔划 直接绘制到画布
      // 带有轮廓的矩形
      /**
       * stroke 可以理解成笔尖笔画
       * 绘制一个矩形 该矩形根据当前的strokeStyle和其他上下文设置进行笔划 直接绘制到画布
       * 设置其样式 使用 strokeStyle
       */
      ctx.strokeStyle = 'red';
      ctx.strokeRect(300, 100, 100, 100); // 带有轮廓的矩形 非填充

      // 只有矩形是可以直接绘制出来的 而其他图形需要根据相对应的路径方法进行绘制
    </script>

    <script>
      <!-- 线段绘制 -->
      {
        const canvas = document.querySelector('#canvas-2');
        const ctx = canvas.getContext('2d');

        // ========= 绘制路径 ==========

        // 创建一个路径
        // 一旦路径被创建出来的话，就可以通过描边或填充路径区域来渲染图形
        ctx.beginPath();
        // 使用画图命令去画出路径
        ctx.strokeStyle = 'red'; // 设置样式
        ctx.lineWidth = 10; // 设置其宽度
        // 指定从哪里开始
        ctx.moveTo(50, 50);
        // 指定到哪个点
        ctx.lineTo(100, 100);
        // 最终渲染画过的东西
        ctx.stroke();
      }
    </script>

    <script>
      <!-- 三角形绘制 -->
      {
        const canvas = document.querySelector('#canvas-3');
        const ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = 'purple';
        ctx.lineWidth = 5;
        ctx.moveTo(250, 20);
        ctx.stroke();
        ctx.lineTo(100, 200);
        ctx.lineTo(400, 200);
        ctx.lineTo(250, 20);
        ctx.closePath(); // 将画完的三角形闭合（比如何会出现线与线连接时的空隙）
        ctx.stroke();

        /**
         * ctx.moveTo(250, 20);
         * ctx.stroke();
         * ctx.lineTo(100, 200);
         * ctx.lineTo(400, 200);
         * // ctx.lineTo(250, 20); 最后一步 化闭合线路 通过调用 ctx.closePath 帮助我们省去了最后一步画闭合线路 自动闭合
         * ctx.closePath();
         */
      }
    </script>

    <script>
      <!-- 圆形绘制 are 弧 -->
      // arc() 方法创建弧/曲线（用于创建圆或部分圆）
      {
        const canvas = document.querySelector('#canvas-4');
        const ctx = canvas.getContext('2d');
        /** arc 参数
          {
            x: number;
            y: number;
            radius: number; 半径
            startAngle: number; 起始角度 0 为三点钟方向
            endAngle: number; 结束角度
            anticlockwise?: boolean; 顺时针还是逆时针画 默认false顺时针
          }
         */
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        // 1π = 180°
        // Math.PI / 180 === 1°
        const deg = deg => (Math.PI / 180) * deg;
        ctx.arc(200, 200, 50, deg(-90), deg(0));
        ctx.stroke();

        // ctx.arc(70, 70, 50, deg(-90), deg((100 / 360) * 50) - deg(-90));
        // ctx.stroke();

        // TODO: 动态画一个圆：未实现
        // let begin = deg(-90);
        // let step = 0;
        // let prevEndDeg;
        // // const end = 100;
        // let timer = setInterval(() => {
        //   step++;
        //   const endDeg = deg((100 / 360) * step) + deg(-90);
        //   ctx.arcTo(70, 70, 50, begin, endDeg);
        //   ctx.stroke();
        //   console.log(begin, endDeg);
        //   begin += endDeg;
        //   if (step === 100) {
        //     clearInterval(timer);
        //   }
        // }, 1000);

        // 圆弧路径
        /*
          x1: number,
          y1: number,
          x2: number,
          y2: number,
          radius: number // 半径

          x1 y1 x2 y2 为控制的坐标
         */
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.moveTo(150, 20);
        ctx.arcTo(150, 100, 50, 20, 30);
        ctx.lineTo(50, 20);
        ctx.stroke();

        // 基础点（起始点）
        ctx.fillStyle = 'blue';
        ctx.fillRect(150, 20, 10, 10);
        // 控制点1 arcTo(150, 100)
        ctx.fillStyle = 'red';
        ctx.fillRect(150, 100, 10, 10);
        // 控制点2
        ctx.fillStyle = 'purple';
        ctx.fillRect(50, 20, 10, 10);
      }
    </script>

    <script>
      {
        const canvas = document.querySelector('#canvas-5');
        const ctx = canvas.getContext('2d');
        // 贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(50, 20);
        // 二次贝塞尔曲线
        ctx.quadraticCurveTo(230, 70, 50, 100);
        ctx.stroke();
        ctx.fillStyle = 'lightblue';
        // 起点
        ctx.fillRect(50, 20, 10, 10);
        // 终点
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 100, 10, 10);

        ctx.fillStyle = 'red';
        // 控制点
        ctx.fillRect(230, 70, 10, 10);

        // 三次贝塞尔曲线
        // ctx.bezierCurveTo()

        //  https://cubic-bezier.com/#.15,.82,.88,.14
        //  https://www.jasondavies.com/animated-bezier/
      }
    </script>
  </body>
</html>
